<template>
	<view class="activity" :style="{ height: newsPanelHeight + 'px' }">
		<view class="activity-card" v-for="(item, index) in dataList" :key="index">
			<v-card >
				<view class="activity-item">
					<view class="activity-item-left">
						<image class="activity-item-img" :src="item.pic" mode="widthFix"></image>
						<view class="activity-item-name">
							{{ item.name }}
						</view>
					</view>
					<view class="user-view">
						<u-icon name="clock" color="#c0c0c0" size="18"></u-icon> 
						<view class="user-num">{{ item.viewNum }}</view>
					</view>
				</view>
			</v-card>
		</view>
		
	</view>
</template>

<script>
const csImg = 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
export default {
	props: {
		newsPanelHeight: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			iconFlag: '/static/images/icon-flag.png',
			csImg: csImg,
			curNow: 0,
			dataList: [
				{
					name: '凤凰山下丹心凤凰山凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: this.iconFlag,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				},
				{
					name: '凤凰山下丹心凤凰山',
					userName: '我是谁',
					viewNum: 26,
					time: '2022-12-22',
					type: '户外',
					pic: csImg,
					userImg: csImg,
				}
			]
		}
	},
	computed:{
	
	},
	methods: {
		
	},
	onLoad() {
		
	},
}
</script>

<style lang="scss" scoped>
.activity{
	margin-top: 10px;
	padding: 10px;
	overflow-y: scroll;
	.activity-card{
		margin-bottom: 15px;
		.activity-item{
		
			padding: 15px;
			@include flexBetween;
			.user-view{
				@include flexAllCenter;
				.user-num{
					margin-left: 3px;
					font-size: 14px;
					color: $uni-text-color-grey;
				}
			}
			.activity-item-left{
				@include flexLrCenter;
				font-size: 20px;
				.activity-item-name{
					flex: 1;
					margin-left: 15px;
					@include clampSpot(1);
				}
				.activity-item-img{
					width: 30px;
					height: 30px;
				}
			}
			
		}
	}

}
	
</style>
